<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>在线画板</title>
  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="iconfont.css">
</head>

<body>
  <div style="display:fixed;width:100%;left:0;top:0;">
    <canvas id="canvas" disable-scroll='true'></canvas>
    <div class="tools">
      <ol class="operation">
        <li id="brush" class="active1" title="画笔"><span class="iconfont icon-chuangzuo"></span></li>
        <li id="eraser" title="橡皮擦"><span class="iconfont icon-xiangpi"></span></li>
        <li id="clear" title="清空"><span class="iconfont icon-file-add"></span></li>
        <li id="undo" title="撤销"><span class="iconfont icon-back"></span></li>
        <li id="save" title="保存"><span class="iconfont icon-save"></span></li>
      </ol>
      <ol class="colors">
        <li id="black" class="color black active2"></li>
        <li id="red" class="color red"></li>
        <li id="green" class="color green"></li>
        <li id="blue" class="color blue"></li>
        <li id="yellow" class="color yellow"></li>
        <li id="skyblue" class="color skyblue"></li>
        <li id="pink" class="color pink"></li>
        <li id="white" class="color white"></li>
      </ol>
    </div>
    <div id="range-wrap"><input type="range" id="range" min="1" max="30" value="5" title="调整笔刷粗细"></div>
  </div>
</body>
<script src="index.js"></script>

</html>